<!-- 在设计区域弹出层 dialog -->
<template>
  <transition name="el-zoom-in-center" v-on:after-leave="transitionLeave">
    <div v-show="dialogShow" :class="{'design-dialog': true, 'design-dialog-nofoot': !hasfooter}" @mousemove="moveto($event)"
      :style="'top: '+top+'px;left: '+left+'px;' + (moveing? 'cursor: move;':'') + 'z-index: '+zIndex+';'"
      ref="designDialog">
      <div class="designDialog-in">
        <div class="dia-header">
          <span>{{title}}</span>
          <div class="move-opt" @click.left="isMove($event)" title="点击移动弹窗">
            <div class="move-scale" v-if="moveing"></div>
            <span :style="moveing? 'font-size:26px;color: #409eff;':''"><i class="el-icon-rank"></i></span>
          </div>
          <div class="close-opt" @click.stop="dialogClose"><i class="el-icon-close"></i></div>
        </div>
        <transition name="el-fade-in-linear">
          <div class="dia-main">
            <slot></slot>
          </div>
        </transition>
        <div class="dia-footer" v-if="this.hasfooter">
          <el-button size="small" @click.stop="dialogClose">取消</el-button>
          <el-button type="primary" size="small" v-if="typeof this.saveclose === 'function'" @click.stop="saveclose">
            保存</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  props: {
    // 显示的title
    title: {
      type: String,
      default: ''
    },
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 是否有底部按钮
    hasfooter: {
      type: Boolean,
      default: true
    },
    // 关闭方法
    close: {
      type: Function
    },
    // 保存并且关闭
    saveclose: {
      type: Function
    },
    // 层级别
    zIndex: {
      type: Number,
      default: 900
    }
  },
  created () {
    PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, this.title)
    PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, this.title)
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
      if (data !== this.title) {
        this.close()
      }
    })
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
      if (data !== this.title) {
        this.close()
      }
    })
    this.positionCenter()
  },
  data () {
    return {
      // 是否显示
      dialogShow: this.dialogVisible,
      // 是否在移动
      moveing: false,
      // 是否显示点击移动提示内容
      moveDisabled: false,
      // 鼠标与当前相对位置x轴
      offsetX: 0,
      // 鼠标与当前相对位置y轴
      offsetY: 0,
      // 显示窗体x轴偏移
      left: 0,
      // 显示窗体y轴偏移
      top: 0
    }
  },
  computed: {
  },
  watch: {
    dialogVisible: {
      handler () {
        this.dialogShow = this.dialogVisible
      },
      deep: true
    }
  },
  methods: {
    isMove (event) {
      if (this.moveing) {
        this.moveing = false
        this.moveDisabled = false
      } else {
        this.moveing = true
        this.offsetX = 22
        this.offsetY = 22
        this.moveDisabled = true
        this.moveto(event)
      }
    },
    moveto (event) {
      if (this.moveing) {
        let x = event.clientX
        let y = event.clientY
        // 显示区域宽度
        let clientW = window.document.documentElement.clientWidth || window.document.body.clientWidth
        // 显示区域高度
        let clientH = window.document.documentElement.clientHeight || window.document.body.clientHeight
        // 当前 dialog 宽度
        let offsetWidth = this.$refs['designDialog'].offsetWidth
        let left = x - this.offsetX
        if (left < 0) {
          left = 0
        }
        if ((offsetWidth + left) > clientW) {
          left = clientW - offsetWidth
        }
        this.left = left
        let top = y - this.offsetY
        if (top < 0) {
          top = 0
        }
        if ((top + 50) > clientH) {
          top = clientH - 50
        }
        this.top = top
      }
    },
    // 自动定位
    positionCenter () {
      // this.moveing = false
      let clientW = window.document.documentElement.clientWidth || window.document.body.clientWidth
      let clientH = window.document.documentElement.clientHeight || window.document.body.clientHeight
      let offsetWidth = this.$refs['designDialog'].offsetWidth
      let offsetHeight = this.$refs['designDialog'].offsetHeight
      this.left = (clientW - offsetWidth) / 2
      this.top = (clientH - offsetHeight) / 2
    },
    dialogClose () {
      this.dialogShow = false
    },
    transitionLeave () {
      if (typeof this.close === 'function') {
        this.close()
      }
    },
    open () {
      this.$nextTick(() => {
        this.positionCenter()
      })
    }
  }
}

</script>

<style scoped lang="scss">
.design-dialog {
  background: #fff;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  position: fixed;
  min-width: 300px;
  max-width: 95vw;

  .designDialog-in {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding-bottom: 70px;
  }

  .dia-header {
    text-align: center;
    position: relative;
    color: #333;
    font-size: 16px;
    padding: 16px 40px;
    line-height: 21px;

    .move-opt {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      -webkit-border-bottom-right-radius: 20px;
      border-bottom-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-left-radius: 20px;
      color: #888;
      background: #f6f6f6;
      line-height: 40px;
      font-size: 22px;
      cursor: move;

      .move-scale {
        width:300px;
        height:300px;
        top:-100px;
        left:-100px;
        position:absolute;
      }
    }

    .close-opt {
      position: absolute;
      right: 17px;
      top: 12px;
      font-size: 22px;
      color: #999;
      cursor: pointer;

      &:hover {
        color: #333;
      }
    }
  }

  .dia-main {
    max-height: calc(100vh - 160px);
    padding: 10px 25px 15px;
    overflow: auto;
  }

  .dia-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: right;
    padding: 15px 25px;

    .el-button {
      -webkit-border-radius: 30px;
      border-radius: 30px;
    }
  }
}
.design-dialog-nofoot .designDialog-in {
  padding-bottom: 0;
}
</style>
